<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">我的地址</block></cu-custom>
		<mescroll-uni class="mescroll-uni" ref="mescrollRef" @init="mescrollInit" height="75%" :down="downOption" :up="upOption"
			@down="downCallback" @up="upCallback" @emptyclick="emptyClick">
			<view class="cu-list menu">
				<view class="cu-item padding" style="height: 180rpx;" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in addList" :key="index"
					@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="margin-right" style="font-size:42upx;">
						<view class="addr-head">
							{{item.name[0]}}
						</view>
					</view>
					<view class="content" @tap="handleAddress(item.addr_id)">
						<view class="text-cut">
							<text class="text-df margin-right-sm">{{item.name}}</text>
							<text class="text-lg">{{item.mobile}}</text>
							<view class='margin-left-sm' v-if="item.def_addr === 1">
								<text class='bg-red radius text-sm' style="padding:4upx 8upx">默认</text>
							</view>
						</view>
						<view class="text-sm flex flex-direction">
							<view class="text-sm"  style="line-height: 40upx;">
								{{item.province|| ''}}{{item.city|| ''}}{{item.county|| ''}}{{item.town|| ''}}{{item.addr|| ''}}
							</view>
						</view>
						<view class="margin-top-xs" v-if="item.ship_address_name">
							<view class='text-xs cu-tag radius line-grey'>{{item.ship_address_name}}</view>
						</view>
					</view>
					<view class="action"  @tap="editAddr(item.addr_id)">
						<text class="cuIcon-edit lg" style="font-size:42upx;"></text>
					</view>
					<view class="move">
						<view class="bg-red" @tap="delAddr(item)">删除</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<view class="padding flex flex-direction" style="position: fixed; bottom: 20rpx; width: 100%;">
			<button class="cu-btn bg-theme lg" @tap="addAddr">
				<text class="cuIcon-add" style="font-size: 20px;"></text>
				<text class="text-xl">添加地址</text>
			</button>
		</view>
		
	</view>
</template>

<script>
	import * as Addr_API from '@/api/member/address.js'
	import * as Checkout_API from '@/api/checkout.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			name:'address'
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				id:'',
				state: 2,
				addList:[],
				type:'',
				izOrder:0
			};
		},
		onLoad(e) {
			console.log(e)
			if(e.izOrder){
				this.izOrder = e.izOrder
			}
			// this.GET_AddressList()
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.GET_AddressList()
			}, 200);
		},
		onShow(e) {
			// console.log('ee====',e)
			const pages = getCurrentPages()
			const currPage = pages[pages.length - 1]  // 当前页
			// console.log(currPage.data)
			// this.GET_AddressList()
		},
		methods:{
			defaultFun(item){
				this.id = item.id
				if (this.state === 1){
				    uni.navigateBack({
				        delta: 1
				    })
				}
			},
			GET_AddressList(){
				Addr_API.getAddrList().then(res =>{
					this.addList = res
				})
			},
			editAddr(id){
				let type = this.type || 'edit'
				uni.navigateTo({url:'./addrEdit?type='+type+'&id='+id})
			},
			addAddr(){
				let izOrder = this.izOrder
				uni.navigateTo({url:'./addrEdit?add=1&izOrder='+izOrder})
			},
			delAddr(item){
				let title=''
				if(this.addList.length===1){
					title = '您确定要删除这唯一地址吗？'
				}else{
					title ='你将删除这个收货地址？'
				}
				uni.showModal({
					title: '删除提示',
					content: title,
					success: (res)=>{
						if (res.confirm) {
							Addr_API.deleteAddr(item.addr_id).then(res=>{
								if(res.status === 500){
									uni.showToast({
										icon:'none',
										title:res.response.data.message
									})
								}else{
									uni.showToast({
										icon:'success',
										title:'成功删除'
									})
									this.GET_AddressList()
								}
							})
						}
					}
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			handleAddress(id){
				if(this.izOrder+'' === '1'){
					// console.log('选个地址')
					Checkout_API.setCheckoutAddr(id).then(res =>{
						uni.navigateBack()
					})
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				Addr_API.getAddrList().then(res =>{
					this.mescroll.endSuccess(res.length)
					this.addList = res
				}).catch(()=>{
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/deep/ .cu-list>.cu-item .move {
	width: 120upx;
}
/deep/ .cu-list>.cu-item.move-cur {
	transform: translateX(-120upx)
}
.list .item{
  display: flex;
  margin: 0 18px;
  border-bottom: 1px solid #dedede;
  padding: 15px 0;
  align-items: center;
  height: 98px;
}
.item .left{
  flex: 1 0 80%;
  font-size: 14px;
}
.item .edit,.choice{
  flex: 1 0 10%;
  text-align: center;
}
.item .edit image{
  width: 20px;
  height: 20px;
}
.item .choice image{
  width: 20px;
  height: 20px;
}

.btn{
  height: 8vh;
  line-height: 8vh;
  // text-align: center;
  // background:$color-main;
  // font-size: 14px;
  // color: #fff;
}
.submitBtn{
	position: absolute;
	// bottom: 50upx;
	height:10vh;
	width: 80%;
	margin: 20upx 10% 0;
}
.addr-head{
	width: 76rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
	background-color: #E6D6D6;
	border-radius: 50%;
	font-size: 40rpx;
	color: #fff;
}
button[type=default] {
		background-color: $color-main;
		color: #fff;
		margin: 0 20rpx 100rpx 20rpx;
	}

	.box_1 {
		flex: 1;
	}

	html,
	body {
		height: 100%;
	}

	.addressList {
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		height: 100%;

		.content {
			flex: 1;

			.address-item {
				min-height: 135rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				margin: 20rpx;

				.item-left {
					margin-right: 30rpx;

					.l-box {
						width: 76rpx;
						height: 76rpx;
						line-height: 76rpx;
						text-align: center;
						background-color: #E6D6D6;
						border-radius: 50%;
						font-size: 40rpx;
						color: #fff;
					}
				}

				.item-center {
					width: 460rpx;

					.c-box {
						.box1 {
							display: flex;
							margin-bottom: 20rpx;
							height: 40rpx;
							line-height: 40rpx;

							.address {
								flex: 1;
							}

							>view:nth-child(1) {
								margin-right: 20rpx;
							}

							>view:nth-child(2) {
								color: #999999;
								font-size: 24rpx;
							}

							>view:nth-child(3) {
								flex: 1;
								text-align: right;
								margin-top: -4rpx;
								margin-right: 20rpx;

								>.show {
									display: inline-block;
									width: 63rpx;
									height: 25rpx;
									line-height: 25rpx;
									background-color: #CB1414;
									font-size: 20rpx;
									text-align: center;
									color: #fff;
									border: 1px solid #CB1414;
									border-radius: 6rpx;
									margin-right: 10rpx;
								}

								>.label {
									display: inline-block;
									width: 63rpx;
									height: 25rpx;
									line-height: 25rpx;
									font-size: 20rpx;
									text-align: center;
									color: #F39800;
									border-radius: 6rpx;
									border: 1px solid #F39800;
								}
							}
						}
					}
				}

				.item-right {
					border-left: 1px solid #ccc;
					padding: 25rpx 0 25rpx 25rpx;
				}
			}
		}
	}
</style>
